---
id: unit1
title: 爱的初体验-webpack 
---

1. 新建一个文件夹（后面所有操作都会在此文件夹进行），执行 ``` npm init -y ``` 进行初始化一个node项目。  
2. ``` npm i webpack@4 webpack-cli@3 -D ```  
3. 根目录新建src文件夹里面放3个文件（api.js、utils.js、index.js），内容如下
```js 
// api.js
export const getUserName = () => console.log('张三');
```

```js 
// utils.js
module.exports = {
    date: () => console.log(new Date())
}
```

```js 
// index.js 
import { getUserName } from './api'; // ES6 模块

const utils = require('./utils'); // commonjs模块

getUserName();
utils.date();
```

4. 在package.json加入以下命令，命令作用是用于文件分析文件之间的关系，进行构建。
```json
 "scripts": {
    "build": "webpack ./src/index.js"
  },
```

5. 在根目录新建 ``` webpack.config.js ``` 内容如下

```js
const path = require('path');

module.exports = {
	mode: 'development', // 模式（分为开发模式，和生产模式）
	entry: {  // 入口文件配置
		main: './src/index.js'
	},
	output: { // 输出文件配置
		filename: 'main.js',
		path: path.resolve(__dirname, 'dist')
	}
}
```

6. 根目录执行 ``` npm run build ``` 进行构建  

7. 会生成一个dist文件夹，里面会有一个main.js文件  
8. 根目录新建一个index.html文件，内容如下：  
```html 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <script src="./dist/main.js"></script>
</body>
</html>
```

9. 浏览器打开这个html文件，查看控制台。